import React, { FC, ReactElement } from 'react';
import { idText } from 'typescript';
import { ITodo } from '../typings';

interface IProps {
    todo: ITodo;
    toggleTodo: (id: number) => void;
    removeTodo: (id: number) => void;
}

const Item:FC<IProps> = ({
    todo,
    toggleTodo,
    removeTodo
}): ReactElement => {
    let { id, content, completed } = todo;

    return (
        <div className="todo-item">
            <input 
                type="checkbox"
                checked={ completed }
                onChange={ () => { toggleTodo(id) } }
            />
        <span style={ { textDecoration: completed ? 'line-through' : 'none' } }>{content}</span>
        <button onClick={() => removeTodo(id)}>删除</button>
        </div>
    )
}

export default Item;